<template>
  <view>
    <view class="th-title">
      <view>好友手机号</view>
      <view>注册时间</view>
      <view>奖励</view>
    </view>
    <view class="list-box" v-for="(item, index) in tableData" :key="index">
      <view>{{ item.invitedPhone }}</view>
      <view>{{ item.createdAt }}</view>
      <view class="u-center">
        <img src="https://img.qumoyugo.com/webimgbg/pet-activit-icon-xbg-b.png" style="width:32rpx;height:32rpx;margin-right: 10rpx;">
        <view>{{ item.reward }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const tableData = ref([])
const pagination = ref({
  page: 0,
  total: 0,
  more: null
})
onMounted(() => {
  initData()
})
const initData = () => {
  $https({
    url: '/recommend/record',
    type: 'ac',
    data: {
      page: pagination.value.page,
      pageSize: 10
    }
  }).then(res => {
    if (res.code === 0) {
      tableData.value.push(...res.data.items)
      pagination.value = {
        page: res.data.pagination.page,
        total: res.data.pagination.total_record,
        more: res.data.pagination.more
      }
    }
  })
}
</script>

<style scoped lang="scss">
.th-title{
  background: #FFF8F3;
  font-size: 30rpx;
  color: #999999;
  height: 82rpx;
  line-height: 82rpx;
  display: flex;
  justify-content: space-between;
  padding: 0 42rpx;
}
.list-box{
  margin: 0 30rpx;
  height: 88rpx;
  line-height: 88rpx;
  color: #333333;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #efefef;
}
</style>
